---
title: Schema di colori
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Color Scheme Card

Rappresenta diversi schemi di colore ed è appositamente progettato per temi chiari e scuri.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Props            | Tipo                                    | Descrizione                                                                                                             | Predefinito |
| ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------- |
| variante         | string                                  | La variante dello schema di colore. Le opzioni includono `Scuro`, `Chiaro` e `Sistema`. | chiaro      |
| selezionato      | booleano                                | Se `vero`, visualizza un segno di spunta per indicare lo schema di colore selezionato.                  |             |
| additional props | `React.ComponentPropsWithoutRef<'div'>` | Proprietà standard dell'elemento HTML `div`                                                                             |             |

</Tab>

</Tabs>

## Color Scheme Picker

Consente agli utenti di scegliere tra diversi schemi di colore.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Props    | Tipo               | Descrizione                                                                                        |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------- |
| valore   | `Schema di colori` | Lo schema di colore attualmente selezionato                                                        |
| onChange | funzione           | La funzione di callback si attiva quando un utente seleziona uno schema di colore. |

</Tab>

</Tabs>
